<template>
  <div class="info">
    <el-form ref="formRef" :model="sysInfo" label-width="80px" :rules="sysInfoRules">
      <el-form-item label="流程名称" prop="processName">
        <el-input v-model="sysInfo.processName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="分配系统" prop="appName">
        <el-select v-model="sysInfo.appName" placeholder="">
          <el-option v-for="item in APP_LIST" :key="item.name" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="sysInfo.remark" type="textarea" placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="subProcess" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { APP_LIST } from '@/constants/appname'
import { ElMessage } from 'element-plus';
const isEditFlag = inject('isEditFlag')
const sysInfo = defineModel("sysInfo", {
  type: Object,
  default: {
    processName: '',
    appName: '',
    remark: ''
  }
})
const formRef = ref(null)
const sysInfoRules = ref({
  processName: [
    { required: true, message: '请输入流程名称', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur' }
  ],
  appName: [
    { required: true, message: '请选择分配系统', trigger: 'change' }
  ]
})
const emit = defineEmits(['submit'])
// 表单验证后按照结果提交，需使用validate方法，否则只提示，不阻止
async function submit() {
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      emit('submit')
    } else {
      console.log('error', fields)
      ElMessage.error('请检查表单')
    }
  })
  console.log(sysInfo.value)

}
function init() {
  if (!isEditFlag.value) {
    console.log('系统页面重置信息')
    sysInfo.value = {
      processName: '',
      appName: '',
      remark: ''
    }
  }
}
init()
</script>

<style lang="less" scoped>
.info {
  width: 500px;
  margin: 50px auto;
}

.subProcess {
  width: 300px;
  margin-left: auto;
  margin: 0 auto;
}
</style>